<!DOCTYPE html>
<html>
<head>
    <script src="../../Jessibuca/jessibuca.js"></script>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../resource/wzgl/wzgl.css"/>
    <style>
        .layui-layer-content {
            overflow: hidden !important;
        }
        .layui-layer-tips .layui-layer-content {
            padding: 4px 7px !important;
        }
        .zyry-title {
            padding-right: 10px;
            line-height: 30px;
            font-weight: bold;
            text-align: right;
            color: #049590 !important;
        }
        .zyry-div {
            width: 430px;
            height: 150px;
            background: url("../../resource/wzgl/ju5.png") no-repeat;
            background-size: 100% 100%;
        }

        .zyry-div2{
            width: 390px;
            height: 150px;
            background-color: rgb(243,255,255);
            color: #000;
        }
        .zdy-tips .layui-layer-content{
            border-radius: 8px!important;
        }
        .zyry-value {
            line-height: 30px;
            font-weight: bold;
            text-align: left;
            color: rgba(0,0,0,0.7) !important;
            width: 170px;
        }

        .control-wrapper {
            position: relative;
            /*width: 50vw;*/
            /*height: 50vh;*/
            /*width: 300px;*/
            /*height: 300px;*/
            width: 120px;
            height: 120px;
            margin: 0 auto;
            border-radius: 50%;
            background-image: url(../../resource/wzgl/yun-yuntai.png);
            background-size: 100% 100%;
        }

        .control-btn {
            position: absolute;
            width: 38%;
            height: 38%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            transition: all .3s linear;
            background: transparent;
        }

        .control-btn:after {
            /* content: ''; */
            position: absolute;
            width: 60%;
            height: 60%;
            background: #fff;
            z-index: 2;
        }

        .control-btn:before {
            /* content: ''; */
            position: relative;
            display: block;
            width: 16px;
            height: 16px;
            border-top: 3px solid #fff;
            border-right: 3px solid #fff;
            border-radius: 0 4px 0 0;
            box-sizing: border-box;
            z-index: 2;
            background-size: cover;
        }

        .control-top {
            top: 0%;
            left: 30%;
            border-radius: 0 100% 0 0;
        }

        .control-top:before {
            transform: translate(30%, -25%);
        }

        .control-top:after {
            left: 0;
            bottom: 0;
            /* border-top: 1px solid #78aee4;
            border-right: 1px solid #78aee4; */
            border-radius: 0 100% 0 0;
        }

        .control-bottom {
            left: 30%;
            bottom: 0%;
            /* transform: translateX(-50%) rotate(45deg); */
            border-radius: 0px 0 100% 0px;
        }
        .control-bottom:before {
            transform: translate(25%, 25%) rotate(90deg);
        }
        .control-bottom:after {
            top: 0;
            left: 0;
            /* border-bottom: 1px solid #78aee4;
            border-right: 1px solid #78aee4; */
            border-radius: 0 0 100% 0;
        }
        .control-left {
            top: 30%;
            left: 0%;
            /* transform: translateY(-50%) rotate(45deg); */
            border-radius: 0 0 0px 100%;
        }
        .control-left:before {
            transform: translate(-25%, 30%) rotate(180deg);
        }
        .control-left:after {
            right: 0;
            top: 0;
            /* border-bottom: 1px solid #78aee4;
            border-left: 1px solid #78aee4; */
            border-radius: 0 0 0 100%;
        }
        .control-right {
            top: 30%;
            right: 0%;
            /* transform: translateY(-50%) rotate(45deg); */
            border-radius: 0 100% 0 0;
        }
        .control-right:before {
            transform: translate(30%, -25%);
        }
        .control-right:after {
            left: 0;
            bottom: 0;
            /* border-top: 1px solid #78aee4;
            border-right: 1px solid #78aee4; */
            border-radius: 0 100% 0 0;
        }
        .control-wrapper .control-btn img{
            width: 30px;
            height: 30px;
            cursor: pointer;
        }
        .controller-button{
            height: 70%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-top: 5px;
            padding-left: 8px;
        }
        .controller-button button{
            width: 25px;
            height: 25px;
            color: #22CB85;
            border-radius: 5px;
            font-size: 18px;
            border: none;

        }
        .controller-button .sub{
            background-image: url(../../resource/wzgl/suoxiao.png);
            background-size: 100% 100%;
            cursor: pointer;
        }
        .controller-button .add{
            background-image: url(../../resource/wzgl/fangda.png);
            background-size: 100% 100%;
            cursor: pointer;
        }
        .controller-button span{
            margin-left: 10px;
            margin-right: 10px;
            font-size: 19px;
            color: #22CB85;
        }
        .controller-button
        .controller-button-box{
            display: flex;
        }
        #mui-player{
            height: 100%;
            width: 100%;
        }
        .source-flag{position:absolute !important;top:10px !important;left:auto !important;right:15px !important;font-style:normal;display:none;z-index:10}
        .ai-icon{
            position:absolute;bottom:50px;left:auto;right:10px;font-style:normal;display:none;z-index: 10;cursor: pointer;
        }
        .Ai{
            background: url("${ctxPath}/admin/images/greenAi.png") no-repeat 50%;
            background-size: 100% 100%;
            width: 32px!important;
            height: 32px!important;
        }
    </style>
</head>
<body class="pear-container test-body">
<div class="layui-row layui-col-space5">
    <div class="layui-col-xs6 layui-col-md2" style="width: 20%">
        <div class="layui-card">
            <div class="" style="border: 1px #049590 solid">
                <div class="div-zy">
                    <div class="div-zynr">
                        <div class="zy-title gznr">工作内容：<span class="zy-value" style="width: 50px;">${planInfo.JOB_CONTENT!}</span></div>
                        <div class="zy-title zydw">作业单位：<span
                                class="zy-value">${planInfo.CONSTRUCTION_MANAGEMENT_UNIT!}</span></div>
                        <div class="zy-title">风险等级：<span class="zy-value">${planInfo.RISK_LEVEL!}</span></div>
                        <div class="zy-title">作业时间：<span class="zy-value" id="zysj"></span></div>
                    </div>
                </div>
            </div>
            <div class="" style="margin-top: 10px;">
                <div class="div-monitor">
                    <div class="div-title" style="padding-bottom: 5px;padding-left: 5px">
                        <i class="title-icon"></i>
                        监控设备
                    </div>
                    <div class="monitor">
                        <ul class="ul-list">
                            @for(item in camList!){
                            <li class="list-item" video-url="${item.stream!}" camera_num="${item.camera_num}">
                                <div class="test-title">${item.camera_name!}</div>
                                <div class="test-div"><i class="layui-icon test-icon">&#xe6ed;</i></div>
                            </li>
                            @}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="" style="margin-top: 10px;">
                <div class="div-yt">
                    <div class="div-title">
                        <i class="title-icon"></i>
                        云台控制
                    </div>
                    <div class="layui-col-xs6 layui-col-md6">
                        <div class="control-wrapper">
                            <div class="control-btn control-top"><img src="../../resource/wzgl/yun-top.png" id="top"  alt=""></div>
                            <div class="control-btn control-left"><img src="../../resource/wzgl/yun-left.png" id="left" alt=""></div>
                            <div class="control-btn control-bottom"><img src="../../resource/wzgl/yun-botton.png"  id="bottom" alt=""></div>
                            <div class="control-btn control-right"><img src="../../resource/wzgl/yun-right.png" id="right" alt=""></div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-md6 controller-button" style="">
                        <div class="controller-button-box" style="text-align: center;">
                            <button class="sub" id="bb_sub"></button>
                            <span>变倍</span>
                            <button class="add" id="bb_add"></button>
                        </div>
                        <div class="controller-button-box" style="text-align: center">
                            <button class="sub" id="bj_sub"></button>
                            <span>变焦</span>
                            <button class="add" id="bj_add"></button>
                        </div>
                        <div class="controller-button-box" style="text-align: center">
                            <button class="sub" id="gq_sub"></button>
                            <span>光圈</span>
                            <button class="add" id="gq_add"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6 layui-col-md7" style="width: 55%">
        <div class="layui-card top-panel">
            <!-- <div class="layui-card-header" id="video-name">监控视频</div>-->
            <div class="layui-card-body" style=" height: 641px; background-color: #0C0C0C;">
                <div id="mui-player">
                    <span class="tspan">无信号!</span>
                    <div class="ts source-flag">
                        <span class=""></span>&nbsp;<i onclick="stopPlay(this,true)" style="color: whitesmoke!important;font-size: 28px" class="layui-icon layui-icon-close-fill"></i>
                    </div>
                </div>
                <div class="ai-icon" onclick="changeSf(this)">
                    <i class="Ai"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6 layui-col-md7" style="width: 25%">
        <div class="">
            <div class="div-ry">
                <div class="div-title">
                    <i class="title-icon"></i>
                    作业人员
                </div>
                <div id="box_zyrx" style="height: 90px; overflow: auto;">
                </div>
            </div>
        </div>
        <div class="">
            <div class="div-ry">
                <div class="div-title">
                    <i class="title-icon"></i>
                    非作业人员
                </div>
                <div id="box_fzyrx" style="height: 90px; overflow: auto;">
                </div>
            </div>
        </div>
        <div class="">
            <div class="div-wgqr">
                <div class="div-title">
                    <i class="title-icon"></i>
                    待确认违规操作
                </div>
                <div>
                    <div class="layui-col-12">
                        <ul class="ul-wzqr" id="box_wzxx">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>

    layui.use(['form', 'jquery', 'laydate', 'dictionary', 'element','toast', 'ws' ,'common','flow'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;
        let element = layui.element;
        let toast = layui.toast;
        let common = layui.common;
        let flow = layui.flow;
        let maxPonds=5;
        var lzMap=new Map();
        let dqPonds=null;
        let MODULE_PATH = "${ctxPath}/wzgl/";
        let CAMERA_MANAGE_PATH = "${ctxPath}/api/camera/";
        var startTime = "${planInfo.START_TIME!}";
        var endTime = "${planInfo.END_TIME!}";
        $("#zysj").text(layui.util.toDateString(startTime, 'MM-dd HH:mm') + "至" + layui.util.toDateString(endTime, 'MM-dd HH:mm'));
        flow.lazyimg({
            elem: '#box_wzxx img'
            ,scrollElem: '#box_wzxx' //一般不用设置，此处只是演示需要。
        });
        let cur_camera_num = "";
        let plan_id = "${planInfo.ID}";
        var mp;
        var config;
        var layer_tips = 0;
        $(document).on('mouseenter mouseleave', ".zyrx", function (e) {
            if (e.type == "mouseenter") {
                html = '<div class="layui-row">\n' +
                    '    <div class="layui-col-md4" style="padding-top: 5px;padding-left: 5px">\n' +
                    '      <div class="grid-demo"><img src="'+$(this).data("head")+'" onError="javascript:this.src=&quot;../../resource/wzgl/head.png&quot;" width="140px" height="140px"></div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-col-xs8">\n' +
                    '      <div class="grid-demo">' +
                    '<div class="layui-row"><div class="layui-col-md4 zyry-title">姓名:</div><div class="layui-col-md8 zyry-value">'+$(this).data("name")+'</div></div>' +
                    '<div class="layui-row"><div class="layui-col-md4 zyry-title">时间:</div><div class="layui-col-md8 zyry-value">'+$(this).data("time")+'</div></div>' +
                    '<div class="layui-row"><div class="layui-col-md4 zyry-title">单位:</div><div class="layui-col-md8 zyry-value" title="'+$(this).data("unit")+'" style="150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">'+$(this).data("unit")+'</div></div>' +
                    '<div class="layui-row"><div class="layui-col-md4 zyry-title">手机号:</div><div class="layui-col-md8 zyry-value">'+$(this).data("phone")+'</div></div>' +
                    '<div class="layui-row"><div class="layui-col-md4 zyry-title">驾照分:</div><div class="layui-col-md8 zyry-value">'+$(this).data("point")+'</div></div>' +
                    '</div>\n' +
                    '    </div>\n' +
                    '  </div>';
                layer_tips = layer.tips("<div class='zyry-div2'>" + html + "</div>", this, {
                    tips: [2, 'rgb(243,255,255)'],
                    time: 0,
                    skin: 'zdy-tips',
                    area: ['auto', 'auto']
                });
            } else {
                layer.close(layer_tips);
            }
        })

        /*
       * 订阅视频流
       */
        var jessibuca=null;
        function subscribe(title, cameraCode){
            $.ajax({
                url: CAMERA_MANAGE_PATH + "subscribe?cameraCode=" + cameraCode,
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    if(result&&result.code==0){
                        cur_camera_num = cameraCode;
                        var container=document.getElementById("mui-player");
                        var href=result.data;
                        if (jessibuca!=null){
                            jessibuca.play(href);
                        }else{
                            jessibuca = new Jessibuca({
                                container: container,
                                videoBuffer: 0.2, // 缓存时长
                                isResize: true,
                                decoder: '${ctxPath}/Jessibuca/decoder.js',
                                text: title,
                                loadingText: "加载中...",
                                timeout: 3,
                                loadingTimeout: 3,
                                useWCS: true,
                                debug: false,
                                showBandwidth: false, // 显示网速
                                operateBtns: {
                                    fullscreen: true,
                                    screenshot: true,
                                    play: true,
                                    audio: true,
                                    record: true
                                },
                                forceNoOffscreen: true,
                                isNotMute: false,
                            },);
                            jessibuca.on("recordStart",function(){console.log("录制 start")});
                            jessibuca.on("recordEnd",function(){console.log("录制 end")});
                            jessibuca.on("recordingTimestamp",function(timestamp){
                                $('#mui-player').children('.jessibuca-controls').children('.jessibuca-controls-bottom').children('.jessibuca-controls-left').next('div').children('span').html(timestamp+'秒');
                            });
                            jessibuca.onPause = () => console.log('onPause');
                            jessibuca.on("error",function (error){
                                console.log("error：",error);
                            });
                            //jessibuca.on("timeout",function(error){console.log('timeout:');setTimeout(jessibuca.play(),3000)})
                            jessibuca.on("loadingTimeout",function(){
                                setTimeout(function (){
                                    jessibuca.play();
                                },3000);
                            });
                            jessibuca.on("delayTimeout",function(){
                                setTimeout(function (){
                                    jessibuca.play();
                                },3000);
                            });
                            jessibuca.on("load",function(){
                                jessibuca.play(href);
                                $(".ai-icon").css('display','flex');
                            });
                            jessibuca.on("videoInfo",function(data){
                                $('#mui-player').attr('data-fbl',data.width+'x'+data.height);
                            });
                            jessibuca.on("kBps",function(data){
                                $('#mui-player').attr('data-ws',data);
                            })

                            jessibuca.on("stats",function(s){
                                var fbl =$('#mui-player').attr('data-fbl');
                                var ws =$('#mui-player').attr('data-ws');
                                $(container).find(".jessibuca-controls-left").html(fbl+' \@ '+s.fps+'fps '+ws+'KB/S');
                            })
                        }
                    }
                }
            });
        }

        function subtest(){
            var href="http://flv.bdplay.nodemedia.cn/live/bbb.flv";
            var container=document.getElementById("mui-player");
            if (jessibuca!=null){
                console.log(12312321);
                jessibuca.play(href);
            }else{
                jessibuca = new Jessibuca({
                    container: container,
                    videoBuffer: 0.2, // 缓存时长
                    isResize: true,
                    decoder: '${ctxPath}/Jessibuca/decoder.js',
                    text: "test",
                    loadingText: "加载中...",
                    timeout: 3,
                    loadingTimeout: 3,
                    useWCS: true,
                    debug: false,
                    showBandwidth: false, // 显示网速
                    operateBtns: {
                        fullscreen: true,
                        screenshot: true,
                        play: true,
                        audio: true,
                        record: true
                    },
                    forceNoOffscreen: true,
                    isNotMute: false,
                },);
                jessibuca.on("recordStart",function(){console.log("录制 start")});
                jessibuca.on("recordEnd",function(){console.log("录制 end")});
                jessibuca.onPause = () => console.log('onPause');
                jessibuca.on("error",function (error){
                    console.log("error：",error);
                });
                //jessibuca.on("timeout",function(error){console.log('timeout:');setTimeout(jessibuca.play(),3000)})
                jessibuca.on("loadingTimeout",function(){
                    setTimeout(function (){
                        jessibuca.play();
                    },3000);
                });
                jessibuca.on("delayTimeout",function(){
                    setTimeout(function (){
                        jessibuca.play();
                    },3000);
                });
                jessibuca.on("load",function(){
                    jessibuca.play(href);
                    $(".ai-icon").css('display','flex');
                });
                jessibuca.on("videoInfo",function(data){
                    $('#mui-player').attr('data-fbl',data.width+'x'+data.height);
                });
                jessibuca.on("kBps",function(data){
                    $('#mui-player').attr('data-ws',data);
                })

                jessibuca.on("stats",function(s){
                    var fbl =$('#mui-player').attr('data-fbl');
                    var ws =$('#mui-player').attr('data-ws');
                    $(container).find(".jessibuca-controls-left").html(fbl+' \@ '+s.fps+'fps '+ws+'KB/S');
                })
            }
        }

        $(document).on('click', '.list-item', function () {
            /*subtest();
            return false;*/
            $(".list-item .test-title").css('background', 'rgba(0, 0, 0,0.8)');
            $(this).children(".test-title").css('background', '#049590');
            let title = $(this)[0].firstElementChild.innerText;
            let cameraCode = $(this).attr("camera_num");
            $.when(isOnline(cameraCode)).done(function (data) {
                let status = data;
                if (status == 1) { // 已在监控列表
                    subscribe(title, cameraCode);
                } else if (status == 0) { // 尚未在监测列表
                    let added = addControl(cameraCode); // 申请加入智能识别
                    if (added == 1) {
                        let times = 0, maxRetry = 5;
                        let retry = setInterval(function () { // 定时重试机制
                            $.when(isOnline(cameraCode)).done(function (data) {
                                let status = data; // 检测是否已加入智能识别
                                if (status == 1) { // 已成功加入智能识别
                                    window.clearInterval(retry);
                                    subscribe(title, cameraCode); // 订阅视频
                                } else { // 尚未成功加入智能识别
                                    times++;
                                    if (times > maxRetry) {// 超出最大重试次数
                                        toast.error({title: "系统消息", message: "订阅视频失败，请稍后再试", position: 'topRight'});
                                        window.clearInterval(retry);
                                    }
                                }
                            })
                        }, 1000);
                    } else if (added == 0) {
                        toast.error({title: "系统消息", message: "添加智能管控失败，请检查装置编号", position: 'topRight'});
                        if (jessibuca!=null){
                            jessibuca.destroy();
                        }

                    } else {
                        toast.error({title: "系统消息", message: "行为识别接口服务无法访问", position: 'topRight'});
                        if (jessibuca!=null){
                            jessibuca.destroy();
                        }
                    }
                } else { // 访问行为识别平台失败
                    toast.error({title: "系统消息", message: "行为识别接口服务无法访问", position: 'topRight'});
                    if (jessibuca!=null){
                        jessibuca.destroy();
                    }
                }
            });
        })
        $('.list-item')[0].click();

        /*
        * 检测摄像头对应的视频流是否已加入智能管控
        * 0 未加入； 1 已加入； -1 接口调用失败；
        */
        function isOnline(cameraCode){
            let online = 0;
            $.ajax({
                url: CAMERA_MANAGE_PATH + "getWatchList",
                dataType: 'json',
                async: false,
                type: 'get',
                success: function (result) {
                    console.log(result);
                    if (result.code == 0) {
                        if (result.data) {
                            let camera_online = result.data.ONLINE_CAMERA;
                            if (camera_online && camera_online.length > 0 && camera_online.indexOf(cameraCode)!=-1) {
                                online = 1;
                            }else{
                                online = 0;
                            }
                            dqPonds=camera_online.length;
                            if (dqPonds>=5){
                                toast.error({title: "系统消息", message: "监控池设备已达上限！", position: 'topRight'});
                            }
                        }
                    }else{
                        online = -1;
                    }
                }
            });
            return online;
        }

        /*
        * 加入智能管控
        * 0 加入成功； 1 加入失败； -1 接口调用失败；
        */
        function addControl(cameraCode){
            let added = 0;
            $.ajax({
                url: CAMERA_MANAGE_PATH + "watchControl",
                dataType: 'json',
                async: false,
                data: {
                    add: cameraCode,
                    remove: "",
                    sfId: "",
                    planId: plan_id
                },
                type: 'get',
                success: function (result) {
                    if(result&&result.code==0) {
                        if (result.data.ADDED_CAMERA.length > 0) {
                            added = 1;
                        }else{
                            added = 0;
                        }
                    }else{
                        added = -1;
                    }
                }
            });
            return added;
        }

        let btns = [
            {objid: "top", eventCode: "1026", stopCode: "1025"},
            {objid: "bottom", eventCode: "1028", stopCode: "1027"},
            {objid: "left", eventCode: "1284", stopCode: "1283"},
            {objid: "right", eventCode: "1282", stopCode: "1281"},
            {objid: "bb_sub", eventCode: "770", stopCode: "769"},
            {objid: "bb_add", eventCode: "772", stopCode: "771"},
            {objid: "bj_sub", eventCode: "514", stopCode: "513"},
            {objid: "bj_add", eventCode: "516", stopCode: "515"},
            {objid: "gq_sub", eventCode: "258", stopCode: "257"},
            {objid: "gq_add", eventCode: "259", stopCode: "260"}];

        for(var i in btns){
            initBtnlongPressEvent(btns[i]);
        }

        function initBtnlongPressEvent(btn){
            let timeout;
            let startTime = 0;
            let endTime = 0;
            $("#"+btn.objid).mousedown(function() {
                startTime = new Date().getTime();
                timeout= setTimeout(function() {
                    console.info("发送动作");
                    ptzControl(btn.eventCode, null);
                }, 400);//鼠标按下0.4秒后触发长按事件
            });
            $("#"+btn.objid).mouseup(function() {
                endTime = new Date().getTime();
                clearTimeout(timeout);//清理掉定时器
                if ((endTime - startTime) < 400) {
                    ptzControl(btn.eventCode, btn.stopCode);
                }else{
                    ptzControl(null, btn.stopCode);
                }
            });
        }

        function ptzControl(eventCode, stopCode){
            if(cur_camera_num==""){
                toast.info({title: "操作提示", message: "请先选择要操作的设备", position: "topRight"});
                return;
            }
            $.ajax({
                url: "${ctxPath}/api/camera/control",
                dataType: 'json',
                type: 'get',
                data: {
                    cameraid: cur_camera_num,
                    eventCode: eventCode,
                    stopCode: stopCode,
                    rspeed: 5,
                    cspeed: 5
                },
                success: function (result) {
                    console.info(result);
                }
            });
        }

        window.changeSf=function (obj){
            var cameraNum=cur_camera_num;
            //var cameraNum='1001';
            layer.open({
                type: 2,
                title: "违章识别-算法切换",
                shade: 0.1,
                area: ['600px', '500px'],
                content: "${ctxPath}/event/view/loadsf?cameraNum=" + cameraNum,
            });
        }

        /*window.stopPlay=function (obj,flag){
            if (flag){
                layer.confirm('确定停止本窗口播放？', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    var key=$(obj).parent("div").prev().attr("id");
                    $('#'+key).html('<span className="tspan">无信号!</span>');
                    $('#'+key).next().find('span').html('');
                    $('#'+key).find('span').css('display','block');
                    $('#'+key).next().css('display','none');
                    $('#'+key).next().next().css('display','none');
                    $('#'+key).parent().removeAttr("camera_num");
                    layer.close(index);
                }, function (idx) {
                    layer.close(idx);
                });
            }else{
                var key=obj;
                $('#'+key).html('<span className="tspan">无信号!</span>');
                $('#'+key).next().find('span').html('');
                $('#'+key).find('span').css('display','block');
                $('#'+key).next().css('display','none');
                $('#'+key).parent().removeAttr("camera_num");
            }
        }*/

        // 注册消息推送
        console.info("初始化消息推送...",plan_id);
        let ws = layui.ws;
        let baseUrl = (window.document.location.href).substring(7, (window.document.location.href).indexOf(window.document.location.pathname));
        console.info("ws://"+baseUrl+"/ws/wzMsgPushServ/"+plan_id);
        let ws_ = ws.config({
            url: "ws://"+baseUrl+"/ws/wzMsgPushServ/"+plan_id,
            onopen: function () {

            },
            onclose: function () {

            },
            onmessage: function (msg, userid, get_data) {
                if (get_data!=undefined){
                    if (get_data.type=='wz'){
                        $.ajax({
                            url: "${ctxPath}/event/loadEventName?id="+get_data.id,
                            dataType: 'json',
                            type: 'get',
                            success: function (result) {
                                get_data['eventName']=result.data;
                                addWzxx(get_data);
                            }
                        });

                    }if (get_data.type=='ry'){
                        addUserinfo(get_data);
                    }

                }
            }
        });
        loadWzxx();
        function loadWzxx() {
            // 加载人员信息
            $.ajax({
                url: MODULE_PATH + "data/loadRyxx?plan_id=" + plan_id,
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    if (result && result.length > 0) {
                        for (let i = 0; i < result.length; i++) {
                            addUserinfo(result[i]);
                        }
                    }
                }
            });
            // 加载违章信息
            $.ajax({
                url: MODULE_PATH + "data/loadWzxx?plan_id=" + plan_id,
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    if (result && result.length > 0) {
                        for (let i = 0; i < result.length; i++) {
                            addWzxx(result[i]);
                        }
                    }
                }
            });
        }

        function addUserinfo(userinfo){
            if (userinfo.userKind == 1) {
                $("div[face_id='" + userinfo.faceId + "']").remove();
                $("#box_zyrx").prepend("<div class=\"layui-col-md3 zyrx\" data-head='" + userinfo.faceImage + "' data-name='" + userinfo.name + "' " +
                    "data-time='" + layui.util.toDateString(userinfo.createTime, 'MM-dd HH:mm') + "' data-phone='" + userinfo.phone + "' " +
                    "data-unit='" + userinfo.unit + "'  data-point='" + userinfo.driver_point + "'" +
                    "face_id=\"" + userinfo.faceId + "\" style=\"text-align: center\">" +
                    "                        <div><img src=\"" + userinfo.faceImage + "\" onerror='javascript:this.src=\"../../resource/wzgl/head.png\"' width=\"45px\" height=\"45px\"></div>" +
                    "                        <div class=\"ry\">" + userinfo.name + "</div>" +
                    "                        <div class=\"sj\">" + layui.util.toDateString(userinfo.createTime, 'MM-dd HH:mm') + "</div>" +
                    "                    </div>");
            } else {
                $("div[face_id='" + userinfo.faceId + "']").remove();
                $("#box_fzyrx").prepend("<div class=\"layui-col-md3 zyrx\" data-head='" + userinfo.faceImage + "' data-name='" + userinfo.name + "' " +
                    "data-time='" + layui.util.toDateString(userinfo.createTime, 'MM-dd HH:mm') + "' data-phone='" + userinfo.phone + "' " +
                    "data-unit='" + userinfo.unit + "'  data-point='" + userinfo.driver_point + "'" +
                    "face_id=\"" + userinfo.faceId + "\" style=\"text-align: center\">" +
                    "                        <div><img src=\"" + userinfo.faceImage + "\" onerror='javascript:this.src=\"../../resource/wzgl/head.png\"' width=\"45px\" height=\"45px\"></div>" +
                    "                        <div class=\"ry\">" + userinfo.name + "</div>" +
                    "                        <div class=\"sj\">" + layui.util.toDateString(userinfo.createTime, 'MM-dd HH:mm') + "</div>" +
                    "                    </div>");
            }
        }

        function addWzxx(wzInfo){
            $("#box_wzxx").prepend("<li event_id=\"" + wzInfo.id + "\">" +
                "   <div class=\"ul-div1\">" +
                "       <img data-src='"+wzInfo.imagePath+"' lay-src='"+wzInfo.imagePath+"' src='../../resource/wzgl/event.png' onerror='javascript:this.src=\"../../resource/wzgl/event.png\"' style='width: 36px; height: 36px;'>" +
                "   </div>" +
                "   <div class=\"ul-div2\">" +
                "       <div class=\"wznr\">" + wzInfo.eventName + "</div>" +
                "       <div>" + wzInfo.createTime + "</div>" +
                "   </div>" +
                "   <div class=\"ul-div3\" onclick=\"showSh('" + wzInfo.id + "','" + wzInfo.imagePath + "','" + wzInfo.videoPath + "','" + wzInfo.eventName + "','" + wzInfo.createTime + "')\" >" +
                "       <span style='cursor: pointer'>审核</span>" +
                "   </div>" +
                "</li>");
        }

        //loadWzxx();
        window.showSh = function (id, imagePath, videoPath, eventName,sj) {
            var shHtml = '<div class="layui-tab layui-tab-brief" style="width: 900px;height: 560px;padding: 0px 10px"  lay-filter=""><input type="hidden" id="wid" value="' + id + '">\n' +
                '  <ul class="layui-tab-title">\n' +
                '    <li class="layui-this">图片</li>\n' +
                '    <li>视频</li>\n' +
                '  </ul>\n' +
                '  <div class="layui-tab-content">\n' +
                '    <div class="layui-tab-item layui-show"><img src="' + imagePath + '" onerror="javascript:this.src=\'${ctxPath}/admin/images/wz.png\'" width="900px" height="500px"/></div>\n' +
                '    <div class="layui-tab-item"><video height="500" width="900" controls autoplay autobuffer loop><source src="'+videoPath+'" type="video/mp4"></source></video></div>\n' +
                '  </div>\n' +
                '</div> ';
            layer.open({
                type: 1,
                btn: ['消警', '确认']
                , btn1: function (index) {
                    // 为了保证数据唯一性，点击后操作前应校验一下数据状态，防止与其他客户端操作相互影响
                    var wzid = $("#wid").val();
                    layer.confirm('确定要消警该条记录', {
                        icon: 3,
                        title: '提示'
                    }, function (index) {
                        $.ajax({
                            url: "${ctxPath}/busOperationplan/data/wzqr?id=" + wzid + "&state=2",
                            dataType: 'json',
                            type: 'post',
                            success: function (result) {
                                if (result.code == 0) {
                                    layer.msg("操作成功", {time: 1000, icon: 6});
                                    layer.close(index);
                                    // 移除本条违章信息 （后期还需要通过ws通知其他客户端进行移除）
                                    $("li[event_id='" + wzid + "']").remove();
                                } else {
                                    layer.msg("操作失败", {time: 1000, icon: 6});
                                    layer.close(index);
                                }
                            }
                        })
                    });
                    layer.close(index);
                }
                , btn2: function (index) {
                    var wzid = $("#wid").val();
                    layer.open({
                        type: 2,
                        title: '人员违章扣分',
                        shade: 0.1,
                        area: [common.isModile() ? '100%' : '600px', common.isModile() ? '100%' : '450px'],
                        content: MODULE_PATH + "view/wzPoint?wzid="+wzid+"&sj="+sj+"&type=2"
                    });
                    /*layer.confirm('确定要确认该条记录', {
                        icon: 3,
                        title: '提示'
                    }, function (index) {
                        $.ajax({
                            url: "${ctxPath}/busOperationplan/data/wzqr?id=" + wzid + "&state=1",
                            dataType: 'json',
                            type: 'post',
                            success: function (result) {
                                if (result.code == 0) {
                                    layer.msg("操作成功", {time: 1000, icon: 6});
                                    layer.close(index);
                                    $("li[event_id='" + wzid + "']").remove();
                                } else {
                                    layer.msg("操作失败", {time: 1000, icon: 6});
                                    layer.close(index);
                                }
                            }
                        })
                    });*/
                   // layer.close(index);
                },
                shadeClose: true,
                scrollbar: false,
                title: "审核预览-" + eventName,
                content: shHtml
            })
        }
        /*window.lazyLoad=function (imgs){
            for (var i=0;i<imgs.length;i++){
                var height=imgs[i].offsetTop;
                var weight=window.innerHeight;
                var sheight=divscroll.scrollTop;
                if (height-sheight<=weight){
                    imgs[i].src=imgs[i].dataset.src;
                }
            }
        }
        var divscroll=document.getElementById('box_wzxx');
        let imgs=divscroll.getElementsByTagName("img");
        setTimeout(function (){
            lazyLoad(imgs);
        },1500)
        divscroll.onscroll = function () {
            lazyLoad(imgs);
        };*/
    });
</script>
</html>